<template>
  <div>
    <h2 class="box">{{ tit }}</h2>
    <hr />
    <Child-com @abc="fun"></Child-com>
    <hr>
    <My-pagination :page="20"></My-pagination>
    <My-pagination :page="8" @change="getList"></My-pagination>
    <!-- 事件名称      说明                 回调参数 -->
    <!-- change       分页切换时触发        点击的页码 -->
    <!-- 父向子传参
    在引入的子组件的标签上 绑定一个自定义 属性 子组件通过 props 接收
    子向父传参 
    子组件通过 $emit 方法触发自定义事件 然后父级在引入的子组件的标签上 绑定上这个自定义事件，然后通过事件处理函数接收传递的参数 -->
    
  </div>
</template>

<script>
import ChildCom from "../components/ChildCom.vue";
import MyPagination from "../components/MyPagination.vue";
export default {
  components: {
    ChildCom,
    MyPagination
  },
  data() {
    return {
      tit: "",
    };
  },
  methods: {
    getList(p){
        console.log("发起请求中------ 请求第"+p+"页");
        // 我不知道你点击的第几页？
        // xhr.open('xxxxxx?page='+?)
    },
    fun(v) {
      console.log("得到了", v);
      this.tit = v;
    },
  },
};
</script>

<style scoped>
/* // VUE  SPA (单页面应用 ) */
.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

</style>